<!DOCTYPE html>
<html lang="zh" xmlns:th="https://www.thymeleaf.org">
<head th:replace="_fragments :: head(~{::title})" class="animated fadeIn">
    <meta charset="UTF-8">
    <title>Venns'Blog</title>
</head>
<body>

<!--头部-->
<nav th:replace="_fragments :: nav(1)" class="ui inverted attached segment padded-tb-mini shadow-small ">
    <div class="ui container">
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui white header item">Venns</h2>
            <a href="#" class="menu-item mobile-hide item"><i class="home icon"></i>首页</a>
            <a href="#" class="menu-item mobile-hide item"><i class="idea icon "></i>分类</a>
            <a href="#" class="menu-item mobile-hide item"><i class="address card icon"></i>关于我</a>

            <div class="menu-item mobile-hide right item">
                <div class="ui search">
                    <div class="ui inverted icon input">
                        <input class="prompt" type="text" placeholder="搜索...">
                        <i class="search link icon"></i>
                    </div>
                    <div class="results"></div>
                </div>
            </div>
        </div>
    </div>

    <a id="menu-btn" href="#" class="ui menu black icon button top-right mobile-show">
        <i class="sidebar icon"></i>
    </a>
</nav>

<!--中间-->
<div class="my-container padded-tb-big ">

    <div class="ui container">
        <div class="ui stackable grid">

            <div class="Choices_banner mobile-hide animated slow fadeIn">
                <ul>
                    <li>
                        <div class="Choices_left"><img th:src="@{/images/banner1.jpg}" width="100%"></div>
                        <div class="Choices_right">
                            <h2 class="title">关于我</h2>
                            <p class="desc">关于我的所有故事都在这.....</p>
                            <div class="Choicesbut"><a th:href="@{/about}">了解详情</a></div>
                        </div>
                    </li>
                    <li>
                        <div class="Choices_left"><img th:src="@{/images/banner2.jpg}" width="100%"></div>
                        <div class="Choices_right">
                            <h2 class="title">文章分类</h2>
                            <p class="desc">文章都在这，欢迎阅读...</p>
                            <div class="Choicesbut"><a th:href="@{/category}">了解详情</a></div>
                        </div>
                    </li>
                </ul>
            </div>
            <!--左边 -->
            <div class="eleven wide column animated slow fadeInLeft">

                <div>
                    <span class="square"></span>
                    <span class="main-title">文章</span>
                    <span class="vertical-line"></span>
                    <span class="sub-title">Article</span>
                </div>
                <br>

                <div class="ui segment" th:each="blog : ${blogs.list}">
                    <div class="ui padded segment vertical padded-tb-large">
                        <div class="ui middle aligned stackable grid padded-lr-big">

                            <div class="five wide column">
                                <a th:href="@{/blog/{id}(id=${blog.id})}"><img th:src="${blog.firstPicture}" alt="123"
                                                                               class="ui rounded image center aligned"></a>
                            </div>

                            <div class="eleven wide column">
                                <h3 class="ui header"><a th:href="@{/blog/{id}(id=${blog.id})}"
                                                         class="a-title text-black" th:text="${blog.title}">我是一个标题</a>
                                </h3>
                                <p class="m-text" th:text="${#strings.abbreviate(blog.description,70)}">
                                    瞎比比瞎比比瞎比比瞎比比瞎比比瞎比比瞎比比瞎比比瞎比比瞎比比瞎比比瞎比比瞎比比瞎比比瞎比比瞎比比瞎比比瞎比比瞎比比...
                                </p>
                                <br>
                                <div class="ui grid">
                                    <div class="eleven wide column">
                                        <div class="ui mini horizontal link list">
                                            <div class="item">
                                                <i class="calendar icon"></i><span
                                                    th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2020-01-01</span>
                                            </div>
                                            <div class="item">
                                                <i class="eye icon"></i> <span th:text="${blog.view}">100000</span>
                                            </div>
                                            <div class="item">
                                                <i class="heart icon"></i> <span th:text="${blog.likes}">100000</span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="right aligned five wide column" style="margin-right: auto">
                                        <a href="#" target="_blank" id="tag"
                                           class="ui mini tag padded-tb-tag m-text label no-huanhang"
                                           th:text="${blog.type.name}">python</a>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>


                <br>
                <br>
                <div class="ui mini right floated pagination menu" th:unless="${blogs.pages}==1">
                    <a th:href="@{/(pageNum=${blogs.pageNum}-1)}" th:unless="${blogs.isFirstPage}" class="icon item">
                        <i class="left chevron icon"></i>
                    </a>
                    <a th:each="p : ${blogs.navigatepageNums}" th:text="${p}" th:href="@{/(pageNum=${p})}"
                       class="item" th:classappend="${blogs.pageNum}==${p}? 'active'">1</a>

                    <a th:href="@{/(pageNum=${blogs.pageNum}+1)}" th:unless="${blogs.isLastPage}" class="icon item">
                        <i class="right chevron icon"></i>
                    </a>
                </div>


            </div>

            <!-- 右边 -->
            <div class="five wide column animated slow fadeInRight">

                <div class="ui center aligned segment">
                    <img th:src="@{http://q1.qlogo.cn/g?b=qq&nk=1839938674&s=100}" class="ui avatar shadow-small image"
                         style="width: 80px;height: auto"/>

                    <p class="m-text text-big margin-tb-small">博主：Venns</p>
                    <p class="m-text margin-bottom-small">没有思考和总结就不算真正的努力~</p>
                    <img class="ui rounded image" th:src="@{/images/erweima.jpg}"
                         style="width: 150px;height: auto;display: inline-block;"/>

                </div>
                <!--最新评论-->
                <div class="ui segments">
                    <div class="ui segment">
                        <div class="ui one column grid">
                            <div class="column">
                                <i class="comments icon"></i>最新评论
                            </div>
                        </div>
                    </div>
                    <div class="ui segment">
                        <div class="ui threaded comments">
                            <div class="comment margin-tb-min" th:each="comment : ${comments}">
                                <a class="avatar" target="_blank" th:href="@{/blog/{id}(id=${comment.blog.id})}"
                                   th:alt="点我访问该博客">
                                    <img src="../static/images/1.jpeg" th:src="@{${comment.avatar}}">
                                </a>
                                <div class="content">
                                    <a class="author" th:text="${comment.nickname}" target="_blank"
                                       th:href="@{/blog/{id}(id=${comment.blog.id})}" th:alt="点我访问该博客">Elliot Fu</a>
                                    <div class="ui mini basic red left pointing label padded-mini"
                                         th:if="${comment.adminComment}">博主
                                    </div>
                                    <div class="metadata">
                                    <span class="date"
                                          th:text="${#dates.format(comment.createTime,'yyyy-MM-dd HH:mm')}">昨天上午12:30</span>
                                    </div>

                                    <div style="margin-top: 5px">

                                        <a class="text m-text text-mini"
                                           th:text="${#strings.abbreviate(comment.content,40)}"
                                           th:href="@{/blog/{id}(id=${comment.blog.id})}">
                                            <p>這對我的研究是非常有用.謝謝!</p>
                                        </a>
                                    </div>
                                </div>
                                <div class="ui divider"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--热门文章-->
                <div class="ui segments">
                    <div class="ui segment">
                        <div class="ui one column grid">
                            <div class="column">
                                <i class="thumbs up icon"></i>热门文章
                            </div>
                        </div>
                    </div>
                    <div class="ui segment">
                        <div class="hot-blog">
                            <div th:each="hotblog : ${hotBlogs}">
                                <p><i class="hotjar red icon"></i><a target="_blank" class="hot-blog-title"
                                                                     th:href="@{/blog/{id}(id=${hotblog.id})}"
                                                                     th:text="${hotblog.title}"></a></p>
                                <p class="hot-blog-desc" th:text="${#strings.abbreviate(hotblog.description,40)}"></p>
                                <p class="hot-blog-info">
                                    <span class="hot-blog-time">2019-03-08</span>
                                    <span class="hot-blog-view"> <i class="eye icon"></i><span style="margin-left: 3px"
                                                                                               th:text="${hotblog.view}">100000</span></span>
                                </p>

                                <div class="ui divider"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--标签-->
                <div class="ui segments">
                    <div class="ui segment">
                        <div class="ui one column grid">
                            <div class="column">
                                <i class="tag icon"></i>标签
                            </div>
                        </div>
                    </div>
                    <div class="ui segment">
                        <a href="#" th:each="tag : ${tags}" class="ui basic padded-mini2 label m-tags">
                            <span class="text-white" th:text="${tag.name}">Python</span>
                        </a>
                    </div>
                </div>


            </div>
        </div>

    </div>
</div>

</body>
<!--底部-->
<footer th:replace="_fragments :: footer" class="ui inverted vertical segment padded-tb-big">
    <div class="ui center aligned container ">
        <div class="ui inverted divided stackable grid">


            <div class="three wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img th:src="@{/images/erweima.jpg}" alt="123" class="ui rounded image"
                             style="width: 110px">
                    </div>
                </div>
            </div>

            <div class="three wide column">
                <h4 class="ui inverted header ">友情链接</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">友情链接1</a>
                    <a href="#" class="item">友情链接2</a>
                    <a href="#" class="item">友情链接3</a>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header">联系站长</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">友情链接1</a>
                    <a href="#" class="item">友情链接2</a>
                    <a href="#" class="item">友情链接3</a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header">关于本站</h4>
                <p class="font-spaced font-thin text-lined">1231231231231231231231233123123</p>
            </div>

        </div>
        <div class="ui inverted section divider"></div>
        <p class="font-thin font-spaced">版权</p>
    </div>


</footer>

<!-- 页面jQuery.js的引用位置问题,如果导入了其它与jquery有关的js文件,那么jquery.js须在其它js的前面 -->
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/semantic.min.js}"></script>
<script th:src="@{/js/tags.js}"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script>


    $('.ui.dropdown').dropdown({
        on: 'hover'
    })
    $("#menu-btn").click(function () {
        $(".menu-item").toggleClass("mobile-hide")
    });

    //轮播图
    $(function () {
        function Choices() {
            $(".Choices_banner ul").animate({marginLeft: "-1184px"}, 1000, function () {
                $(".Choices_banner ul>li").eq(0).appendTo($(".Choices_banner ul"));
                $(".Choices_banner ul").css('marginLeft', '0px');
            });
        }

        setInterval("Choices()", "10000");
        var tabChange = setInterval(Choices, 10000);

    });


    // $(function () {
    //
    //     swal({
    //
    //         title: "公告",
    //         text: "本站内文章未经作者允许请勿转载，本博客即将开源，敬请期待！",
    //         button: {
    //             text: "OK"
    //         }
    //     });
    // })


</script>

</html>